import React, { useMemo, useState } from 'react';
import { useRequest } from 'ahooks';
import { useHistory } from 'react-router-dom';
import { useOpenInstall } from '@/common/hooks';
import { getBanners } from '@/service/live';
import RenderJudge from '@/components/RenderJudge';
import BottomDownload from '@/components/BottomDownload';
import Header from './components/Header';
import Banner from './components/Banner';
import LiveContainer from './components/LiveContainer';
import ScoreContainer from './components/ScoreContainer';
import styles from './style/index.scss';
import ActiveImg from '../../assets/images/download/btn.png';

const HomePage = () => {
  useOpenInstall();
  const [page, setPage] = useState('live');
  const history = useHistory();
  // 取安卓的直播banner
  const { data: bannerList } = useRequest(
    () => getBanners({ livingType: 1 }),
  );

  const showBanner = useMemo(() => bannerList?.length && page === 'live', [bannerList, page]);

  const liveObj = {
    label: '直播',
    value: 'live',
    component: (
      <LiveContainer showBanner={showBanner} key="live" />
    ),
  };
  const footballObj = {
    label: '足球',
    value: 'football',
    component: (
      <ScoreContainer sportId={1} enumValue="football" value="足球" key="football" />
    ),
  };
  const basketballObj = {
    label: '篮球',
    value: 'basketball',
    component: (
      <ScoreContainer sportId={2} enumValue="basketball" value="篮球" key="basketball" />
    ),
  };
  const otherObj = {
    label: '其他',
    value: 'other',
    component: (
      <LiveContainer sportId={100} value="其他" key="other" />
    ),
  };

  const list = [liveObj, footballObj, basketballObj, otherObj];

  const { component } = list.find((row) => row.value === page) || liveObj;
  return (
    <main className={styles.container}>
      <div className={styles.header}>
        <Header list={list} value={page} onChange={setPage} />
        <RenderJudge
          value={showBanner}
          active={(
            <Banner list={bannerList} />
          )}
        />
      </div>
      <div className={styles.wrapper}>
        {component}
      </div>
      <img src={ActiveImg} alt="" className={styles.activeBtn} onClick={() => history.push('/exchange')} />
      <BottomDownload />
    </main>
  );
};

export default HomePage;
